<template>
  <div class="content_box">
      <div class="top">
        <!-- 已完成订单详情 状态 -->
        <div class="a_top" @click="show=true">
          <div class="box box1">
            <div class="box_l" v-if="list.address&&list.address.addressNode">{{list.address.addressNode.provinceName}}{{list.address.addressNode.cityName}}{{list.address.addressNode.areaName}}{{list.address.manualAddress}}</div>
            <div class="box_r">普通订单</div>
          </div>
          <div class="box box2" v-if="list&&list.address">
            <div class="box_l">
              <div class="d1">{{list.address.receiverName}}</div>
            </div>
            <div class="box_r">
              <span>{{ list.address.mobileNo }}</span>
            </div>
          </div>
          <div style="color:#999;">上门路线</div>
          <!-- 地图 -->
          <div class="map_box">地图</div>
        </div>
        <div class="b_top" v-for="item in list.address" :key="item.id">
          <div>订单详情</div>
          <div class="box" style="margin:5px 0px;">
            <div class="box_l">照片</div>
            <div class="box_r">
              <img class="img" src="../../asset/images/1.png" alt="" srcset="">
            </div>
          </div>
          <div class="box">
            <div class="box_l">备注：</div>
            <div class="box_r">请电话联系我</div>
          </div>
        </div>
        <div class="c_top">
          <div class="box">
            <div class="box_l">
              <img class="img"  alt="" srcset="">
            </div>
            <div class="box_r">
              <p class="p1">123</p>
              <p class="p2">10.00</p>
              <p class="p3">重量： 总计：元</p>
            </div>
          </div>
        </div>
        <div class="d_top">
          <div class="box_l">总计金额</div>
          <div class="box_r">￥88元</div>
        </div>
      </div>
      <div class="list">
        <div class="box">
          <div class="box_l">订单编号</div>
          <div class="box_r">
            <span>88888888888888</span>
            <van-button size="small" class="btn" @click="copy('88888888888888')">复制</van-button>
          </div>
        </div>
        <div class="box">
          <div class="box_l">订单时间</div>
          <div class="box_r">2018.08.08 12:12:12</div>
        </div>
      </div>
    </div>
</template>
<script>
import {  mapGetters } from 'vuex';
import { getOrderDetail } from 'services/order';

export default {
  name: "OrderDetailContent",
  data() {
    return {
      show: false,
      list: {},
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
   this.getOrderDetail();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    copy(e) {
      console.log(e);
      window.clipboardData.setData("text", "454554");
    },
    getOrderDetail(){
      const { orderNo } = this.$route.params;
      getOrderDetail({ orderNo }).then(response => {
        this.list = response.object;
        console.log(this.list);
      })
    }
  }
};
</script>
<style lang="less" scoped>
.content_box {
  padding-bottom: 180px;
  .top {
    margin-top: 30px;
    background-color: #fff;
    .a_top {
      padding: 30px;
      border-bottom: 1px solid #e1e1e1;
      .box {
        display: flex;
      }
      .box1 {
        font-size: 30px;
        .box_l {
          flex: 1;
          color: #333;
        }
        .box_r {
          color: #4993ff;
          font-size: 24px;
        }
      }
      .box2 {
        .box_l {
          flex: 1;
          .d1 {
            padding-top: 5px;
            font-size: 28px;
          }
          .d2 {
            color: #999;
          }
        }
        .box_r {
          .iconfont {
            line-height: 48px;
            font-size: 24px;
            color: #999;
          }
        }
      }
      .map_box {
        height: 360px;
        border: 1px solid #999;
      }
    }
    .b_top {
      padding: 20px;
      border-bottom: 1px solid #e1e1e1;
      .box {
        display: flex;
        .box_l {
          width: 75px;
          color: #5c5c5c;
        }
        .box_r {
          flex: 1;
          color: #333;
          .img {
            display: block;
            width: 120px;
          }
        }
      }
    }
    .c_top {
      padding: 20px;
      border-bottom: 1px solid #e1e1e1;
      .box {
        display: flex;
        &:not(:first-child) {
          margin-top: 20px;
        }
        .box_l {
          width: 140px;
          .img {
            display: block;
            width: 120px;
          }
        }
        .box_r {
          flex: 1;
          p {
            margin: 0;
            &.p1 {
              color: #333;
            }
            &.p2 {
              color: #999;
            }
            &.p3 {
              text-align: right;
              color: #333;
            }
          }
        }
      }
    }
    .d_top {
      padding: 20px;
      display: flex;
      .box_l {
        color: #333;
      }
      .box_r {
        flex: 1;
        text-align: right;
        color: #f0250f;
      }
    }
  }
  .list {
    margin-top: 20px;
    padding: 30px;
    background-color: #fff;
    .box {
      display: flex;
      .box_l {
        padding-right: 20px;
        color: #999;
      }
      .box_r {
        flex: 1;
        color: #5c5c5c;
        .btn {
          float: right;
          //width: 138px;
          height: 42px;
          line-height: 42px;
          border-radius: 21px;
        }
      }
    }
  }
}
</style>
